<template>
    <div>
        <!-- 导航栏总宽度，可按需调整 -->
        <!-- 导航栏总高度，包含波浪底部 -->
        <!--  viewBox 方便适配，保持宽高比 -->
        <svg width="800" height="180" viewBox="0 0 800 80" xmlns="http://www.w3.org/2000/svg">
            <!-- 1. 定义渐变（按钮背景色） -->
            <defs>
                <!-- 未选中按钮：深色垂直渐变 -->
                <linearGradient id="btn-bg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#1C2A38" /> <!-- 顶部颜色 -->
                    <stop offset="100%" stop-color="#121E28" /> <!-- 底部颜色 -->
                </linearGradient>

                <!-- 选中按钮（点宽）：蓝色垂直渐变 -->
                <linearGradient id="active-btn-bg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="#2A6CBE" /> <!-- 顶部颜色 -->
                    <stop offset="100%" stop-color="#3A98E6" /> <!-- 底部颜色 -->
                </linearGradient>
            </defs>

            <!-- 2. 绘制底部波浪背景 -->
            <!-- 波浪背景的基础色，与渐变底部一致 -->
            <path d="M0,80 Q160,60 320,80 Q480,100 640,80 Q800,60 800,80" fill="#121E28" />
            <!-- 装饰性波浪纹理 -->
            <path d="M0,80 Q50,70 100,80 Q150,90 200,80 Q250,70 300,80 Q350,90 400,80 Q450,70 500,80 Q550,90 600,80 Q650,70 700,80 Q750,90 800,80" 
                  fill="none" stroke="#3A98E6" stroke-width="2" opacity="0.6" />
            
            <!-- 第二层波浪效果 -->
            <path d="M0,85 Q40,75 80,85 Q120,95 160,85 Q200,75 240,85 Q280,95 320,85 Q360,75 400,85 Q440,95 480,85 Q520,75 560,85 Q600,95 640,85 Q680,75 720,85 Q760,95 800,85" 
                  fill="none" stroke="#2A6CBE" stroke-width="1.5" opacity="0.4" />
            
            <!-- 装饰性光点 -->
            <circle cx="100" cy="80" r="2" fill="#3A98E6" opacity="0.8">
                <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite" />
            </circle>
            <circle cx="300" cy="80" r="1.5" fill="#2A6CBE" opacity="0.6">
                <animate attributeName="opacity" values="0.2;0.6;0.2" dur="3s" repeatCount="indefinite" />
            </circle>
            <circle cx="500" cy="80" r="2" fill="#3A98E6" opacity="0.8">
                <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.5s" repeatCount="indefinite" />
            </circle>
            <circle cx="700" cy="80" r="1.5" fill="#2A6CBE" opacity="0.6">
                <animate attributeName="opacity" values="0.2;0.6;0.2" dur="2.8s" repeatCount="indefinite" />
            </circle>

            <!-- 3. 绘制 5 个按钮（循环逻辑可复用，这里手动拆分更清晰） -->
            <!-- 按钮 1：光伏储能（未选中） -->
            <!-- 圆角半径 -->
            <!-- 白色描边（模拟原图的边框） -->
            <rect x="0" y="20" width="160" height="40" rx="8" ry="8" fill="url(#btn-bg)" stroke="#2F4152"
                stroke-width="1" />

            <!-- 按钮 2：共享换电（未选中） -->
            <rect x="160" y="20" width="160" height="40" rx="8" ry="8" fill="url(#btn-bg)" stroke="#2F4152"
                stroke-width="1" />

            <!-- 按钮 3：点宽（选中态） -->
            <rect x="320" y="20" width="160" height="40" rx="8" ry="8" fill="url(#active-btn-bg)" stroke="#2F4152"
                stroke-width="1" />

            <!-- 按钮 4：共享单车（未选中） -->
            <rect x="480" y="20" width="160" height="40" rx="8" ry="8" fill="url(#btn-bg)" stroke="#2F4152"
                stroke-width="1" />

            <!-- 按钮 5：共享运力（未选中） -->
            <rect x="640" y="20" width="160" height="40" rx="8" ry="8" fill="url(#btn-bg)" stroke="#2F4152"
                stroke-width="1" />

            <!-- 4. 绘制按钮文字（居中对齐） -->
            <!-- 文字 1：光伏储能 -->
            <!-- 按钮中心坐标（x=0+160/2，y=20+40/2 + 5 垂直修正） -->
            <text x="80" y="45" text-anchor="middle" fill="#FFFFFF" font-family="Microsoft YaHei, sans-serif"
                font-size="14" font-weight="bold">光伏储能</text>

            <!-- 文字 2：共享换电 -->
            <text x="240" y="45" text-anchor="middle" fill="#FFFFFF" font-family="Microsoft YaHei, sans-serif"
                font-size="14" font-weight="bold">共享换电</text>

            <!-- 文字 3：点宽 -->
            <text x="400" y="45" text-anchor="middle" fill="#FFFFFF" font-family="Microsoft YaHei, sans-serif"
                font-size="14" font-weight="bold">点宽</text>

            <!-- 文字 4：共享单车 -->
            <text x="560" y="45" text-anchor="middle" fill="#FFFFFF" font-family="Microsoft YaHei, sans-serif"
                font-size="14" font-weight="bold">共享单车</text>

            <!-- 文字 5：共享运力 -->
            <text x="720" y="45" text-anchor="middle" fill="#FFFFFF" font-family="Microsoft YaHei, sans-serif"
                font-size="14" font-weight="bold">共享运力</text>
        </svg>
    </div>
</template>
<script lang="ts" setup>

</script>
<style lang="less" scoped></style>